<template>
  <!-- 订单详情的 -->
  <div class="drawer">
    <!-- 里面的drawer -->
    <div class="inner">
      <!-- 里面的drawer 撤销退房 -->
      <div v-if="innerType == 'checkOut'">
        <el-drawer :append-to-body="true"
                   :visible.sync="innerDrawer">
          <template slot="title">
            <div class="bt">
              <el-button @click="GoBack"
                         type="text"
                         style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                   style="margin-right: 10px"></i>返回</el-button>
              <div style="
                  line-height: 34px;
                  margin-left: 20px;
                  display: inline-block;
                ">
                办理退房
              </div>
            </div>
          </template>
          <!--点击撤销退房后  -->
          <div style="
              width: 100%;
              height: 100%;
              display: flex;
              align-content: space-around;
              flex-direction: column;
              justify-content: space-between;
            ">
            <div class="inner_body">
              <div class="remind">
                撤销退房后，房间将回到已入住状态，相关统计报表将被回滚
              </div>
              <div class="inner_content">
                <div style="
                    display: flex;
                    justify-content: space-between;
                    padding-right: 40px;
                  ">
                  <div class="left">
                    <el-checkbox :indeterminate="isIndeterminate"
                                 v-model="checkAll"
                                 @change="handleCheckAllChange">全选</el-checkbox>
                  </div>
                  <div class="right">
                    <div style="display: inline-block; margin-right: 20px">
                      已选 2 间
                    </div>
                    <div style="display: inline-block"
                         v-if=" orderDetail">共 211间</div>
                  </div>
                </div>

                <el-checkbox-group v-model="checkedOut"
                                   @change="handleCheckedRoomsChange">
                  <div class="room">
                    <el-checkbox v-for="room in orderDetail.rooms"
                                 :label="room"
                                 :key="room.room_num">
                      <div class="left">
                        <span class="roomType">{{room.room_type}}/{{room.room_num}} </span>
                      </div>
                      <div class="right">
                        <div class="time">
                          {{room.date}}
                        </div>
                        <div class="price">房费：¥{{room.price}}</div>
                      </div>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
                <el-divider content-position="left"></el-divider>
                <div style="padding: 0 15px">
                  <el-input type="textarea"
                            placeholder="请填写撤销退房备注/文本框可以拉伸高度"
                            v-model="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            maxlength="300"
                            show-word-limit>
                  </el-input>
                </div>
              </div>
            </div>

            <div class="bottom"
                 style="padding-right: 20px">
              <div class="VeryBottom"
                   style="float: right; margin-bottom: 20px">
                <div class="more"></div>
                <div class="bt">
                  <el-button type="primary">修改订单?</el-button>
                  <el-button type="primary"
                             @click="ConfirmCheckOut()">确认退房</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
      <!--  里面的drawer 添加消费 -->
      <div v-if="innerType == 'addOtherPay'">
        <el-drawer :visible.sync="innerDrawer">
          <template slot="title">
            <div class="bt">
              <el-button @click="GoBack"
                         type="text"
                         style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                   style="margin-right: 10px"></i>返回</el-button>
              <div style="
                  line-height: 34px;
                  margin-left: 20px;
                  display: inline-block;
                  color: #000;
                  font-weight: 600;
                ">
                添加消费
              </div>
            </div>
          </template>
          <el-divider></el-divider>
          <div style="
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
              height: 91%;
              padding: 16px 24px;
              overflow: auto;
              overflow: overlay;
            ">
            <el-form ref="AddPayForm"
                     :model="AddPayForm"
                     label-width="80px">
              <el-form-item label="消费项目">
                <el-select v-model="AddPayForm.project"
                           style="width: 80%"
                           placeholder="请选择">
                  <el-option v-for="item in AddPayFormOptions"
                             :key="item.id"
                             :label="item.name"
                             :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量">
                <el-input v-model="AddPayForm.num"
                          style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="金额">
                <el-input v-model="AddPayForm.money"
                          prefix-icon="el-icon-my-money"
                          style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="消费日期">
                <el-date-picker v-model="AddPayForm.PayDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 80%">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea"
                          style="width: 80%"
                          v-model="AddPayForm.textarea" />
              </el-form-item>
            </el-form>
          </div>
          <div style="
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              padding: 12px 24px;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              flex-direction: row-reverse;
              border-top: 1px solid #e9eaed;
            ">
            <div style="float: right">
              <el-button size="small">取消</el-button>
              <el-button type="primary"
                         size="small"
                         @click="addConsume">确定</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
      <!-- 里面的drawer  收款/退款 -->
      <div v-if="innerType == 'receivableORrefund'"
           class="receivableORrefund">
        <el-drawer :visible.sync="innerDrawer">
          <template slot="title">
            <div class="bt">
              <el-button @click="GoBack"
                         type="text"
                         style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  float: left;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                   style="margin-right: 10px"></i>返回</el-button>
              <div v-if="orderDetail">
                <el-tabs v-model="receivable_or_refund">
                  <el-tab-pane label="收款"
                               name="receivable">
                    <div class="receivableBody">
                      <div class="header">
                        <div>
                          <p>订单总额</p>
                          <p>￥{{ orderDetail.order_money }}</p>
                        </div>
                        <div>
                          <p>已付金额</p>
                          <p>￥{{ orderDetail.pay_money }}</p>
                        </div>
                        <div>
                          <p>还需付款</p>
                          <p>￥{{ orderDetail.no_pay_money }}</p>
                        </div>
                      </div>
                      <!-- 收款 -->
                      <div class="receivableForm">
                        <el-form ref="receivableForm"
                                 label-width="80px"
                                 :model="receivableForm">
                          <el-form-item label="项目">
                            <el-radio v-model="receivableForm.radio"
                                      label="3">收款</el-radio>
                            <el-radio v-model="receivableForm.radio"
                                      label="5">收押金</el-radio>
                          </el-form-item>
                          <el-form-item label="支付方式">
                            <el-select style="width: 50%"
                                       v-model="receivableForm.Paymethod"
                                       placeholder="请选择">
                              <el-option v-for="item in Paymethod_options"
                                         :key="item.id"
                                         :label="item.name"
                                         :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="金额">
                            <el-input v-model="receivableForm.money"
                                      prefix-icon="el-icon-my-money"
                                      style="width: 50%"></el-input>
                          </el-form-item>
                          <el-form-item label="日期">
                            <el-date-picker v-model="receivableForm.date"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 50%"
                                            placeholder="选择日期">
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="备注">
                            <el-input type="textarea"
                                      style="width: 80%"
                                      v-model="receivableForm.textarea" />
                          </el-form-item>
                        </el-form>
                        <div style="
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: justify;
                            -ms-flex-pack: justify;
                            justify-content: space-between;
                            padding: 12px 24px;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            flex-direction: row-reverse;
                            border-top: 1px solid #e9eaed;
                          ">
                          <div style="float: right">
                            <el-button size="small">取消</el-button>
                            <el-button type="primary"
                                       size="small"
                                       @click="addCash">确定</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="退款"
                               name="refund">
                    <div class="refundBody">
                      <div class="header">
                        <div v-if="orderDetail">
                          <p>订单总额</p>
                          <p>￥{{ orderDetail.order_money }}</p>
                        </div>
                        <div>
                          <p>已付金额</p>
                          <p>￥{{ orderDetail.pay_money }}</p>
                        </div>
                        <div>
                          <p>还需付款</p>
                          <p>￥{{ orderDetail.no_pay_money }}</p>
                        </div>
                      </div>
                      <!-- 退款 -->
                      <div class="refundForm">
                        <div class="refundSelect">
                          <el-radio class="refundSelect_bt"
                                    @change="refund"
                                    v-model="receivableForm.radio"
                                    label="线上原路退款"
                                    border
                                    size="medium">线上原路退款</el-radio>
                          <el-radio v-model="receivableForm.radio"
                                    @change="refund"
                                    label="线下退款"
                                    border
                                    size="medium">线下退款</el-radio>
                        </div>
                        <div v-if="refundForm.radio == '线上原路退款'"
                             style="width: 100%; margin-top: 20px">
                          <el-table :data="refundForm.tableData"
                                    height="250"
                                    border
                                    style="width: 100%">
                            <el-table-column prop="date"
                                             label="发生日期"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="name"
                                             label="收款金额">
                            </el-table-column>
                            <el-table-column prop="remark"
                                             label="备注">
                            </el-table-column>
                            <el-table-column prop="remark"
                                             label="可退金额">
                            </el-table-column>
                          </el-table>
                          <div style="
                              display: -webkit-box;
                              display: -ms-flexbox;
                              display: flex;
                              -webkit-box-pack: justify;
                              -ms-flex-pack: justify;
                              justify-content: space-between;
                              padding: 12px 24px;
                              -webkit-box-align: center;
                              -ms-flex-align: center;
                              align-items: center;
                              flex-direction: row-reverse;
                              border-top: 1px solid #e9eaed;
                            ">
                            <div style="float: right">
                              <el-button size="small">取消</el-button>
                              <el-button type="primary"
                                         size="small">确定</el-button>
                            </div>
                          </div>
                        </div>
                        <div v-if="refundForm.radio == '线下退款'">
                          <el-form ref="refundForm"
                                   label-width="80px"
                                   :model="refundForm">
                            <el-form-item label="项目">
                              <el-radio v-model="refundForm.project"
                                        label="退款">退款</el-radio>
                              <el-radio v-model="refundForm.project"
                                        label="退押金">退押金</el-radio>
                            </el-form-item>
                            <el-form-item label="支付方式">
                              <el-select style="width: 50%"
                                         v-model="refundForm.Paymethod"
                                         placeholder="请选择">
                                <el-option v-for="item in Paymethod_options"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="金额">
                              <el-input v-model="refundForm.moeny"
                                        prefix-icon="el-icon-my-money"
                                        style="width: 50%"></el-input>
                            </el-form-item>
                            <el-form-item label="日期">
                              <el-date-picker v-model="refundForm.date"
                                              type="date"
                                              style="width: 50%"
                                              placeholder="选择日期">
                              </el-date-picker>
                            </el-form-item>
                            <el-form-item label="备注">
                              <el-input type="textarea"
                                        style="width: 80%"
                                        v-model="refundForm.textarea" />
                            </el-form-item>
                          </el-form>
                          <div style="
                              display: -webkit-box;
                              display: -ms-flexbox;
                              display: flex;
                              -webkit-box-pack: justify;
                              -ms-flex-pack: justify;
                              justify-content: space-between;
                              padding: 12px 24px;
                              -webkit-box-align: center;
                              -ms-flex-align: center;
                              align-items: center;
                              flex-direction: row-reverse;
                              border-top: 1px solid #e9eaed;
                            ">
                            <div style="float: right">
                              <el-button size="small">取消</el-button>
                              <el-button type="primary"
                                         size="small">确定</el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </template>
        </el-drawer>
      </div>
      <!--  里面的drawer 添加提醒 -->
      <div v-if="innerType == 'remind'">
        <el-drawer :visible.sync="innerDrawer">
          <template slot="title">
            <div class="bt">
              <el-button @click="GoBack"
                         type="text"
                         style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                   style="margin-right: 10px"></i>返回</el-button>
              <div style="
                  line-height: 34px;
                  margin-left: 20px;
                  display: inline-block;
                  color: #000;
                  font-weight: 600;
                ">
                添加提醒
              </div>
            </div>
          </template>
          <div style="margin-top: 20px">
            <el-form red="remindForm"
                     :model="remindForm">
              <el-form-item label="提醒时间">
                <el-date-picker v-model="remindForm.time"
                                type="datetime"
                                style="width: 50%"
                                placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="提醒内容">
                <el-input v-model="remindForm.text"
                          type="textarea"
                          style="width: 80%"
                          placeholder="填写提醒内容">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-drawer>
      </div>
      <!-- 里面的drawer  入住人信息 -->
      <div v-if="innerType=='userInfo'">
        <el-drawer :visible.sync="innerDrawer">
          <template slot="title">
            <div class="bt">
              <el-button @click="GoBack"
                         type="text"
                         style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                   style="margin-right: 10px"></i>返回</el-button>
              <div style="
                  line-height: 34px;
                  margin-left: 20px;
                  display: inline-block;
                  color: #000;
                  font-weight: 600;
                ">
                入住人信息
              </div>
            </div>
          </template>
          <div class="inner_body"
               v-if="innerType=='userInfo'">
            <div></div>

            <div class="userInfo_time"
                 style="padding-left: 24px; padding-right: 24px; background: #f2f3f6">
              <span class="text-tip">入住时间：02-22</span>
              <span class="text-tip"
                    style="max-width: 200px; word-break: break-all">101/豪华大床房</span>
              <span class="text-tip">¥2000.00</span>
            </div>
            <span style="margin-left: 20px">入住人姓名必填</span>
            <el-form ref="userInfo"
                     :model="userInfo">
              <div class="inner-info"
                   style="display:flex">
                <el-input class="name"
                          placeholder="姓名"
                          v-model="userInfo.name"
                          style="width:180px"></el-input>
                <el-input class="phone"
                          placeholder="手机号"
                          v-model="userInfo.phone"></el-input>
                <el-select v-model="userInfo.cardType"
                           style="width:200px"
                           placeholder="请选择">
                  <el-option v-for="item in userInfo.cardOption"
                             :key="item.id"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
                <el-input class="id"
                          style="width:300px"
                          placeholder="证件号"
                          v-model="userInfo.cardid"></el-input>
                <el-button type="text"
                           style="margin-left:10px">
                  <i class="el-icon-delete"></i>

                </el-button>
              </div>
            </el-form>
          </div>
        </el-drawer>
      </div>
    </div>
    <!-- 内容 -->
    <el-drawer :visible.sync="drawer"
               :direction="direction"
               :before-close="handleClose">
      <template slot="title">
        <el-tabs v-model="activeName"
                 @change=test
                 @tab-click="handleClick">
          <el-tab-pane label="订单详情"
                       name="first"> </el-tab-pane>
          <el-tab-pane label="操作日志"
                       name="second"></el-tab-pane>
        </el-tabs>
      </template>
      <div class="orderBody"
           v-if="activeName == 'first'">
        <div class="orderDeatil"
             v-if="orderInfo">
          <div class="top">
            <div class="info">
              <div class="name">{{ orderInfo.name }} {{ orderInfo.phone }}</div>
              <div class="from">
                <span class="point"></span>
                <span class="fromName"
                      v-if="orderInfo">{{
                  orderInfo.channel
                }}</span>
              </div>
            </div>
            <div :class="[orderInfo.status_text=='已预订'?'state_6':'',orderInfo.status_text=='已入住'?'state_7':'',orderInfo.status_text=='已退房'?'state_8':'']">{{ orderInfo.status_text || orderInfo.status }}</div>
          </div>
          <div class="money"
               v-if="orderDetail">
            <div>
              <span>订单金额</span>
              <span style="
                  color: rgba(4, 134, 254, 1);
                  display: block;
                  font-size: 12px;
                ">￥{{ orderDetail.order_money }}</span>
            </div>
            <div v-if="orderDetail">
              <span>已付金额</span>
              <span style="
                  color: rgba(230, 162, 60, 1);
                  display: block;
                  font-size: 12px;
                ">￥{{ orderDetail.pay_money }}</span>
            </div>
            <div>
              <span>还需付款</span>
              <span style="
                  color: rgba(245, 108, 108, 1);
                  display: block;
                  font-size: 12px;
                ">￥{{ orderDetail.no_pay_money }}</span>
            </div>
          </div>
          <div class="roomInfo"
               v-if="orderDetail">
            <div class="top">
              <span class="info"
                    v-if="orderDetail">房间信息:￥{{ orderDetail.pay_money }}</span>
              <span v-if="orderDetail.rooms!==undefined && orderDetail.rooms.length>0">共{{ orderDetail.rooms.length }}间房</span>
            </div>
            <div class="roomDeatil"
                 v-for="room in orderDetail.rooms"
                 :key="room.id">
              <div class="left">
                <span>{{ room.room_type }}</span>
                <span style="color: #909399; font-size: 12px; display: block">{{
                  room.date
                }}</span>
              </div>
              <el-button type="text"
                         class="middle">
                <span style="color: #0486fe"
                      @click="openInnerDrawer">入住人</span>

                <span class="num"
                      style="">{{ room.people_num }}</span>
              </el-button>
              <div class="right">
                <span>{{ room.price }}</span>
                <span :class="[room.status=='已预订'?'state_6':'',room.status=='已入住'?'state_7':'',room.status=='已退房'?'state_8':'']">{{ room.status }}</span>
              </div>

            </div>
          </div>
          <div class="otherInfo">
            <div class="top">
              <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                  <template slot="title">
                    <div class="collapse_title">
                      <div class="info">
                        <span class="info">其他消费:￥20.00</span>
                      </div>
                    </div>
                  </template>
                  <span>
                    <el-button type="text"
                               @click="addConsumption"><i class="el-icon-plus"
                         style="margin-right: 5px"></i>添加消费</el-button>
                  </span>
                  <div class="tables"
                       v-if='orderDetail'>
                    <el-table :data="orderDetail.consume_list"
                              stripe
                              :key="tableDataDom"
                              :header-cell-style="{
                        background: '#eef1f6',
                        color: '#fffff',
                      }"
                              style="width: 100%">
                      <el-table-column prop="title"
                                       label="消费项目">
                      </el-table-column>
                      <el-table-column prop="price"
                                       label="消费金额">
                      </el-table-column>
                      <el-table-column prop="date"
                                       width="100"
                                       label="消费日期">
                      </el-table-column>
                      <el-table-column prop="admin"
                                       label="录入人">
                      </el-table-column>
                      <el-table-column prop="remarks"
                                       label="备注">
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="text"
                                     size="small"
                                     @click="delConsume(scope.row)"
                                     style="color: red">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="2"
                                  v-if="orderDetail">
                  <template slot="title">
                    <div class="collapse_title">
                      <div class="info">
                        <span>收款金额:￥20.00</span>
                      </div>
                    </div>
                  </template>
                  <span>
                    <el-button type="text"
                               @click="addRefund"><i class="el-icon-plus"
                         style="margin-right: 5px"></i>添加收款</el-button>
                  </span>
                  <el-table :data="orderDetail.pay_list"
                            stripe
                            :key="tableDataDom"
                            :header-cell-style="{
                      background: '#eef1f6',
                      color: '#fffff',
                    }"
                            style="width: 100%">
                    <el-table-column prop="title"
                                     label="项目">
                    </el-table-column>
                    <el-table-column prop="payment"
                                     label="支付方式">
                    </el-table-column>
                    <el-table-column prop="price"
                                     label="金额">
                    </el-table-column>
                    <el-table-column prop="date"
                                     width="100"
                                     label="日期">
                    </el-table-column>
                    <el-table-column prop="remarks"
                                     label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button type="text"
                                   size="small"
                                   @click="delConsume(scope.row)"
                                   style="color: red">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          <!-- 收款金额 -->
          <!-- <div class="otherInfo">
            <div class="top">
              <span class="info">收款金额:￥20.00</span>
              <span>
                <el-button type="text"><i class="el-icon-plus"
                     style="margin-right: 5px"></i>添加收款</el-button>
              </span>
            </div>
            <div class="tables">
              <el-table :data="PayData"
                        stripe
                        :header-cell-style="{ background: '#eef1f6', color: '#fffff' }"
                        style="width: 100%">
                <el-table-column prop="Consumption"
                                 label="项目">
                </el-table-column>
                <el-table-column prop="ModeOfPayment"
                                 label="支付方式">
                </el-table-column>
                <el-table-column prop="money"
                                 label="金额"> </el-table-column>
                <el-table-column prop="date"
                                 label="日期"> </el-table-column>
                <el-table-column prop="remark"
                                 label="备注"> </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text"
                               size="small"
                               style="color: red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div> -->
          <!-- 订单提醒 -->
          <!-- <div class="otherInfo">
            <div class="top">
              <span class="info">订单提醒:0</span>
              <span>
                <el-button type="text"
                           @click="Addremind"><i class="el-icon-plus"
                     style="margin-right: 5px"></i>添加提醒</el-button>
              </span>
            </div>
            <div class="remind">
              <span style="width: 70%">
                <el-input v-model="input"></el-input>
              </span>
              <span>
                <el-button type="text"> <i class="el-icon-edit"></i></el-button>
              </span>
              <span>
                <el-button type="text"><i class="el-icon-delete"></i></el-button>
              </span>
            </div>
          </div> -->
          <!-- 备注 -->
          <div class="otherInfo">
            <div class="remark">
              <span class="info">备注:</span>
              <div class="remark">内容内</div>
            </div>
            <div class="orderNo">订单号：{{ orderDetail.order_no }}</div>
          </div>
        </div>
        <!-- 底部选项 -->
        <div class="bottom">
          <div class="VeryBottom">
            <div class="more">
              <el-dropdown :hide-on-click="true"
                           @command="handleCommand">
                <span class="el-dropdown-link">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="撤销退房">撤销退房?</el-dropdown-item>
                  <el-dropdown-item disabled
                                    command="b">进用选项</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="bt"
                 v-if='orderInfo'>
              <el-button type="primary"
                         @click="editOrder">修改订单333</el-button>
              <el-button type="primary"
                         v-if="orderInfo.status_text=='已预订'"
                         @click="CheckIn(orderDetail)">办理入住222</el-button>
              <el-button type="primary"
                         v-else-if="orderInfo.status_text=='已入住'"
                         @click="checkOut(orderDetail,orderInfo)">办理退房</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="activeName == 'second'"
           class="orderDeatil">
        <div class="block">
          <div class="radio">
            排序：
            <el-radio-group v-model="reverse"
                            style="margin-top: 0px;">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
          </div>

          <!-- <el-timeline :reverse="reverse">
            <el-timeline-item v-for="(activity, index) in orderLog"
                              :key="index"
                              :timestamp="`${activity.title} 操作人: ${activity.admin.username}  ${ activity.create_time} `">
              <el-card>

              </el-card>
            </el-timeline-item>
          </el-timeline> -->
          <div class="orderLog">
            <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(activity, index) in orderLog"
                                :key="index"
                                :timestamp="`${activity.title} 操作人: ${activity.admin.username}  ${ activity.create_time} `"
                                placement="top">
                <el-card v-if="activity.title == '新增预订订单'">
                  <div>
                    <span style="color:#0486fe">正常入住</span>
                    <div class="title">
                      <div class="flex">
                        <div>渠道:{{ activity.content.channel }}</div>
                        <div>预订人:{{ activity.content.name }}</div>
                        <div>手机号:{{ activity.content.phone }}</div>
                      </div>
                    </div>
                    <el-divider style="margin:12px 0l"></el-divider>
                    <div class="title"
                         v-for="room in activity.content.room_info.rooms "
                         :key="room.room">
                      <div>
                        房间号: {{room.room}}
                      </div>
                      <div>
                        入住时间: {{ room.start_date }}
                      </div>
                      <div>
                        房费:{{ room.price }}
                      </div>
                    </div>
                  </div>
                </el-card>
                <el-card v-else-if="activity.title != '新增预订订单'">
                  <h4>{{ activity.title }}</h4>
                  <p>{{ activity.content.message }}</p>
                </el-card>

              </el-timeline-item>

            </el-timeline>
          </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
const RoomsOptions = []
import { AddConsume, AddCash, delConsumeOrCash, userCheckIn, GetOrderDetail, userCheckOut } from '@/api/pms_order'
import { consume } from '@/api/consume'
import { PayChannel } from '@/api/PaymentMethodSetting'

export default {
  props: {
    drawer: Boolean,
    orderDetail: Object < Array,
    orderInfo: Object,
    orderLog: Array,
    innerType: String,
  },
  components: {},
  data () {
    return {
      tableDataDom: 1,//tableDOM不刷新的时候
      /* 添加消费 */
      AddPayForm: {
        project: '',
        num: '',
        money: '',
        PayDate: '',
        textarea: '',
      },
      AddPayFormOptions: [
        {
          id: '1',
          label: '佣金',
        },
        {
          id: '2',
          label: '泡面',
        },
        {
          id: '3',
          label: '双早',
        },
      ],
      /* 收款/退款 */
      // 收款
      receivable_or_refund: 'receivable',
      activeNames: ['1'],
      receivableForm: {
        radio: '收款',

        Paymethod: '',
        money: '',
        date: '',
        textarea: '',
      },
      Paymethod_options: [
        {
          id: '1',
          name: '美团代收',
        },
        {
          id: '2',
          name: '携程代收',
        },
        {
          id: '3',
          name: '飞猪代收',
        },
      ],
      // 退款
      refundForm: {
        radio: '线下退款',
        tableData: [],
        project: '退押金',
        money: '',
        date: '',
        textarea: '',
      },
      // 添加提醒
      remindForm: {
        time: '',
        text: '',
      },
      innerDrawer: true,
      direction: 'rtl',
      activities2: [{}],
      activities: [
        {
          content: '活动按期开始',
          timestamp: '2018-04-15',
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13',
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11',
        },
      ],
      reverse: true,
      activeName: 'first',
      state: '已预定',
      textarea: '',
      from: '自来客',
      innerDrawer: false,
      input: '',
      checkAll: false, //退房全选
      checkedCities: [],
      checkedOut: [],
      userInfo:
      {
        name: '',
        phone: '',
        cardid: '',
        cardType: '',
        cardOption: [
          {
            id: 0,
            label: '未知'
          },
          {
            id: 1,
            label: '身份证'
          },
          {
            id: 2,
            label: '军官证'
          },
          {
            id: 3,
            label: '通行证'
          },
          {
            id: 4,
            label: '护照'
          },
          {
            id: 5,
            label: '其他'
          },
        ],

      },
      cities: cityOptions,
      checkOutRooms: RoomsOptions,
      isIndeterminate: true,
      fromColor: 'background-color:rgb(78, 142, 255)',
      ConsumeData: [
        {
          title: '洗护服务',
          price: '￥300.00',
          date: '2021-10-26',
          admin: '某某某',
          remarks: '',
        },
      ],
      PayData: [
        {
          Consumption: '订单金额',
          ModeOfPayment: '现金',
          money: '￥30.00',
          date: '2021-10-26',
        },
      ],
      editNum: 0,
    }
  },
  created () {
    this.GetConsume()
    this.GetPayChannel()
  },
  methods: {
    // 确认退房
    async ConfirmCheckOut () {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        order_id: sessionStorage.getItem('checkOutRoomId'),
        rooms: this.checkedOut
      }
      console.log(data);
      await userCheckOut(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.$emit('GetRoom')
          this.innerDrawer = false
          this.$emit('closeDetail')
        }
      })
      this.$emit('closeDetailDrawer')
      console.log("点击了确认退单");
    },
    // 办理退房
    async checkOut (orderDetail, orderInfo) {
      console.log('撤销退房')
      this.innerType = 'checkOut'
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        order_id: this.orderInfo.id
      }
      this.RoomsOptions = orderDetail.rooms
      this.checkOutRooms = orderDetail.rooms
      console.log(orderDetail);
      this.innerDrawer = true
      // this.$emit('OpenRevocation', "撤销退房")
    },
    // 办理入住
    async CheckIn (orderDeatil) {
      console.log(orderDeatil);
      let data = {
        order_id: orderDeatil.order_id,
        rooms: orderDeatil.rooms
      }
      await userCheckIn(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.$emit('GetRoom')
        }
      })
    },
    // 修改订单
    editOrder () {
      this.$emit('editOrder')
      console.log("点击了修改订单111");
    },
    // 添加收银
    async addCash () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
        order_id: this.orderInfo.id,
        type: this.receivableForm.radio,
        pay_type: this.receivableForm.Paymethod,
        money: this.receivableForm.money,
        date: this.receivableForm.date,
        remarks: this.receivableForm.textarea
      }
      await AddCash(data).then(res => {
        if (res.data.message == '添加收款成功') {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.innerDrawer = false
          this.$emit('updateDrawer', this.orderInfo)
          // this.$nextTick(() => {
          //   this.tableDataDom++
          // })
        }
        console.log(res);
      })
    },

    // 获取收款方式
    async GetPayChannel () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
      }

      await PayChannel("GET", data).then(res => {
        this.Paymethod_options = res.data.data.list

      })
    },

    // 删除消费项目
    async delConsume (value) {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        id: value.id
      }
      await delConsumeOrCash(data).then(res => {
        console.log(res.data);
        if (res.data.message == '删除成功') {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.innerDrawer = false
          this.$emit('updateDrawer', this.orderInfo, "=======")
          // this.$nextTick(() => {
          //   this.tableDataDom++
          // })
        }
      })
      console.log(value);

    },
    // 获取消费项
    async GetConsume () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
      }
      await consume(data, 'GET').then(res => {
        this.AddPayFormOptions = res.data.data.list
        // console.log(this.AddPayFormOptions, "获取消费项");
      })
    },
    // 确认添加消费项
    async addConsume () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
        order_id: this.orderInfo.id,
        name: this.AddPayForm.project,
        num: this.AddPayForm.num,
        money: this.AddPayForm.money,
        date: this.AddPayForm.PayDate,
        remarks: this.AddPayForm.textarea
      }
      await AddConsume(data, 'POST').then(res => {
        if (res.data.message == '添加消费成功') {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.innerDrawer = false
          this.$emit('updateDrawer', this.orderInfo)
          // this.$nextTick(() => {
          //   this.tableDataDom++
          // })
        }
        console.log(res);
      })
    },
    // 添加提醒
    Addremind () {
      this.innerType = 'remind'
      this.innerDrawer = true
    },
    // 退款
    refund (value) {
      this.refundForm.radio = value
      console.log(value)
    },
    // 添加收费或者退款
    addRefund () {
      this.innerType = 'receivableORrefund'
      this.innerDrawer = true
    },
    //添加消费
    addConsumption () {
      this.innerType = 'addOtherPay'
      this.innerDrawer = true
    },
    handleCheckAllChange (val) {
      console.log(val, "val====");
      console.log(this.RoomsOptions);
      this.checkedOut = val ? this.checkOutRooms : []
      this.isIndeterminate = false

    },
    handleCheckedRoomsChange (value) {
      console.log("=====", value);
      console.log(this.checkOutRooms);
      let checkedCount = value.length
      this.checkAll = checkedCount === this.checkOutRooms.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkOutRooms.length
      if (value.length == this.checkOutRooms.length) {
        this.checkAll = true
      }
    },
    GoBack () {
      this.innerDrawer = false
    },
    openInnerDrawer () {
      console.log("1231231231");
      this.innerType = 'userInfo'
      this.innerDrawer = false

    },
    handleCommand (command) {
      console.log("点击了撤销退房");
      // this.$message('click on item ' + command)
      // if (command == '撤销退房') {
      //   console.log('撤销退房')
      //   this.innerType = 'checkOut'
      //   this.innerDrawer = true
      //   // this.$emit('OpenRevocation', "撤销退房")
      // }
    },
    handleCloseInner () {
      console.log('点击了里面的X')
      this.innerDrawer = false
    },
    handleClose (done) {
      this.$emit('ColseDrawer', { drawer: false })

      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => { });
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    test (value) {
      console.log("点击了订单详情的tab");
    }
  },
}
</script>

<style lang="scss" scoped>
.orderLog {
  .title {
    .flex {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    margin-left: 40px;
    margin-top: 10px;
  }
}
::v-deep .inner {
  .el-tabs__header {
    margin-left: 80px !important;
  }
  .el-tabs__nav .is-top {
  }
  .receivableBody {
    .header {
      display: flex;
      justify-content: space-between;
    }
  }
  .refundBody {
    .header {
      display: flex;
      justify-content: space-between;
    }
    .refundSelect {
      .el-radio {
        border-radius: 2px;
        height: 52px;
        width: 156px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        cursor: pointer;
        align-items: center;
      }
    }
  }
}
::v-deep .inner_body {
  .inner-info {
    margin-left: 24px;
    margin-top: 24px;
    padding-right: 24px;
  }
  .userInfo_time {
    margin-top: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .inner_content {
  }
  .remind {
    border: 1px solid #053dc8;
    background-color: #e6ecfa;
    color: #333;
    padding: 5.5px 16px;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .el-checkbox {
    border-radius: 5px;
    padding: 0px 20px;
  }
  .el-checkbox-group {
    .el-checkbox {
      border-radius: 5px;
      padding: 0px 20px;
      margin-bottom: 20px;
      padding-bottom: 10px;
    }
    .el-checkbox__input {
      margin-top: 25px;
      float: left;
    }
    .el-checkbox__label {
      margin-top: 10px;

      display: flex;
      justify-content: space-between;
    }
    .room {
      .left {
        float: left;
        line-height: 44px;
      }
      .right {
        .price {
          margin-top: 10px;
        }
        float: right;
      }
      .el-checkbox {
        border: 1px solid #053dc8;
        width: 90%;
      }
      padding: 12px;
    }
  }
}
::v-deep .orderBody {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;

  .bottom {
    padding: 0px 20px;
    margin-bottom: 20px;

    .VeryBottom {
      .more {
        padding: 5px 10px 8px 13px;
        border: 1px solid #0486fe;
        border-radius: 5px;

        .el-dropdown {
          color: #0486fe;
        }
      }

      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

  .orderDeatil {
    padding: 16px;

    .top {
      .state {
        width: 42px;
        height: 20px;
        background: #ffc394;
        border-radius: 1px;
        font-size: 12px;
        color: white;
        line-height: 20px;
        text-align: center;
      }
      .state_6 {
        width: 42px;
        height: 20px;
        background: #ffc394;
        border-radius: 1px;
        font-size: 12px;
        color: white;
        line-height: 20px;
        text-align: center;
      }
      .state_7 {
        width: 42px;
        height: 20px;
        background: #32deff;
        border-radius: 1px;
        font-size: 12px;
        color: white;
        line-height: 20px;
        text-align: center;
      }
      .state_9 {
        width: 42px;
        height: 20px;
        background: #d9d9d9;
        border-radius: 1px;
        font-size: 12px;
        color: white;
        line-height: 20px;
        text-align: center;
      }

      .info {
        display: flex;
        justify-content: space-between;

        .from {
          width: 68px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #f2f6fc;
          border-radius: 2px;
          padding-left: 5px;

          .point {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            line-height: 8px;
            background-color: rgb(78, 142, 255);
          }

          .fromName {
            display: inline-block;
            margin-left: 5px;
            line-height: 30px;
          }
        }
      }
    }

    .money {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .roomInfo {
      margin-top: 20px;

      .top {
        display: flex;
        justify-content: space-between;
      }

      .roomDeatil {
        height: 64px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: space-between;
        background: #ffffff;
        border: 1px solid #e4e7ed;
        flex-wrap: wrap;

        .left {
          margin-left: 10px;
          overflow: hidden;
        }

        .middle {
          padding-top: 10px;
          overflow: hidden;

          .num {
            width: 20px;
            height: 20px;
            background: #0486fe;
            line-height: 20px;
            border-radius: 15px;
            color: white;
            display: inline-block;
            text-align: center;
          }
        }

        .right {
          padding-top: 10px;

          overflow: hidden;

          margin-right: 10px;

          .state_6 {
            margin-left: 10px;
            width: 42px;
            height: 20px;
            padding: 2px 3px;
            background: #ffc394;
            border-radius: 1px;
            font-size: 12px;
            color: white;
            line-height: 20px;
            text-align: center;
          }
          .state_7 {
            margin-left: 10px;
            width: 42px;
            height: 20px;
            padding: 2px 3px;
            background: #32deff;
            border-radius: 1px;
            font-size: 12px;
            color: white;
            line-height: 20px;
            text-align: center;
          }
          .state_8 {
            margin-left: 10px;
            width: 42px;
            height: 20px;
            padding: 2px 3px;
            background: #d9d9d9;
            border-radius: 1px;
            font-size: 12px;
            color: white;
            line-height: 20px;
            text-align: center;
          }
        }
      }
    }

    .otherInfo {
      .remark {
        display: block;
      }

      margin-top: 20px;

      .top {
        .collapse_title {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        width: 100%;
        // display: flex;
        // justify-content: space-between;
      }

      .tables {
        border: 1px solid #e4e7ed;
        border-bottom: none;
      }
    }

    .remind {
      span {
        i {
          margin: 0 10px;
        }

        display: inline-block;
      }
    }
  }
}
::v-deep .receivableORrefund {
  .el-drawer__header {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .el-tabs .el-tabs--top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .bt {
    height: 100%;
  }
}
::v-deep .el-drawer__header {
  margin-bottom: 0px !important;
}
::v-deep .el-timeline-item__wrapper {
  padding-right: 20px;
}
::v-deep .el-drawer__close-btn {
  position: absolute;
  right: 10px;
  top: 20px;
}

::v-deep .drawer {
  .orderContent {
    .from {
      .point {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        line-height: 8px;
      }
    }
  }
}
// ￥符号
::v-deep .el-icon-my-money {
  background: url("../../assets/images/￥.png") center center no-repeat;
  background-size: 12px;
}
</style>
